import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { observer, inject } from 'mobx-react';

import style from './css/index.module.css';

const Films = observer(({ showBar }) => {
  return (
    <>
      {showBar && (
        <>
          <div className={style.swiper}>Film 轮播1</div>
          <ul className={style.navbar}>
            <li>
              <NavLink to="/film/nowPlaying">正在热映</NavLink>
            </li>
            <li>
              <NavLink to="/film/comingSoon">即将上映</NavLink>
            </li>
          </ul>
        </>
      )}
      <Outlet />
    </>
  );
});

export default inject((store) => {
  const { tabbarShow: showBar } = store.tabbarStore;
  return {
    showBar,
  };
})(Films);
